<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
</head>
<body>
    <div id="app">
        <el-button type="primary" @click="showTreeDialog">角色授权</el-button>
        <!--数据表格-->
        <el-table
                ref="roleTable"
                :data="roles"
                @select-all="selectAll"
                @current-change="changeCurrent"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column label="编号">
                <template slot-scope="scope">
                    <span >{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column label="名称">
                <template slot-scope="scope">
                    <span >{{ scope.row.name }}</span>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="角色授权" :visible.sync="dialogTreeVisible">
            <el-tree
                    :data="functions"
                    show-checkbox
                    default-expand-all
                    node-key="id"
                    ref="tree"
                    highlight-current
                    @check="checkTreeNode"
                    :props="defaultProps">
            </el-tree>
        </el-dialog>
    </div>
    <script src="/js/vue/vue.js"></script>
    <script src="/js/axios/axios.min.js"></script>
    <script src="/js/qs/qs.min.js"></script>
    <script src="/js/elementui/index.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    roles:null,
                    current:null, //当前点击的角色
                    dialogTreeVisible:false, //显示权限树对话框
                    functions:null, //权限数据
                    defaultProps: { //修改树属性的名称
                        children: 'subFunctions',
                        label: 'name'
                    }
                }
            },
            mounted(){
                //加载角色
                axios.get("/roles").then(value => {
                    if(value.data.code == 1){
                        this.roles = value.data.data;
                    }
                });
                //加载所有的权限
                axios.get("/functions").then(value => {
                    if(value.data.code == 1){
                        this.functions = value.data.data;
                    }
                })
            },
            methods:{
                //列表点击一行
                changeCurrent(row){
                    this.current = row;
                    //取消所有的选择效果
                    this.$refs.roleTable.clearSelection();
                    //选中当前的行
                    this.$refs.roleTable.toggleRowSelection(row);
                },
                //取消全选角色
                selectAll(){
                    this.$refs.roleTable.clearSelection();
                },
                //显示授权树
                showTreeDialog(){
                    if(this.current){
                        this.dialogTreeVisible = true;
                        //查询角色的相关权限
                        axios.get("/functions/role/"+this.current.id)
                            .then(value => {
                                if(value.data.code == 1){
                                    //选中对应的权限
                                    this.$refs.tree.setCheckedKeys(value.data.data);
                                }
                            })
                    }else{
                        this.$message("请选择角色");
                    }
                },
                checkTreeNode(arg1,arg2){
                    console.log(arg1);
                    console.log(arg2);
                    //判断当前的权限id是否在选中的key中（勾选）
                    if(arg2.checkedKeys.indexOf(arg1.id) != -1){
                        axios.post("/role-functions",
                            {roleId:this.current.id,funId:arg1.id})
                            .then(value =>{
                                if(value.data.code == 1){
                                    this.$message("添加权限成功");
                                }
                            });
                    }else{
                        axios.delete("/role-functions/"+this.current.id+"/"+arg1.id)
                            .then(value =>{
                                if(value.data.code == 1){
                                    this.$message("删除权限成功");
                                }
                            });
                    }
                }
            }
        })
    </script>
</body>
</html>